<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Pi.Comet > Examples > Realtime Chat Example</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript" src="/pi.js"></script>
	<script type="text/javascript" name="Chat Application">


		function listen(){
			var comet  = new pi.comet;
			comet.environment.setUrl("/pi-push");
			comet.event.push = function(RESPONSE){
				getData(eval(RESPONSE).reverse());
			}
			comet.send();
		}

		function send(TEXT,NICKNAME){
			var tunnel = new pi.xhr;
			tunnel.environment.setType("POST");
			tunnel.environment.setUrl("/pi-send");
			tunnel.environment.addData("text",TEXT);
			tunnel.environment.addData("nickname",NICKNAME);
			tunnel.send();
		}

		var cache = {};
		function getData(DATA){
			var container = document.getElementById("text");
			var text = document.getElementById("data");

			for(var i=0; i<DATA.length; i++){
				if(cache[DATA[i].id])continue;
				cache[DATA[i].id]=DATA[i];
				text.innerHTML += "<STRONG>"+DATA[i].nickname+"</STRONG> :"+DATA[i].text+"<br />";
			}
			if(text.offsetHeight>190)
				text.style.marginTop = "-"+(text.offsetHeight-180)+"px";
		}


		var prepareForm = function(){
			var windowSize = { "w":pi.env.ie?Math.max(document.body.clientWidth,document.documentElement.clientWidth):window.innerWidth, "h":pi.env.ie?Math.max(document.body.clientHeight,document.documentElement.clientHeight):window.innerHeight }

			var container = document.getElementById("container");

			container.style.left = (windowSize.w/2)-(container.offsetWidth/2)+"px";
			container.style.top = (windowSize.h/2)-(container.offsetHeight/2)+"px";

			var nickname = document.getElementById("nickname");
			var text = document.getElementById("message");
			var evtype = pi.env.ie;
			text.focus();

			var onEnter = function(eventargs){
				if(eventargs.keyCode!=13)return;

				send(text.value,nickname.value);
				text.value = "";
			}

			nickname[evtype?"attachEvent":"addEventListener"]((evtype?"on":"")+"keyup",onEnter,false);
			text[evtype?"attachEvent":"addEventListener"]((evtype?"on":"")+"keyup",onEnter,false);

			listen();
		}


	</script>
	<style type="text/css">
		html, body { margin:0; padding:0; background:#ccc; }
		#container { position:absolute; width:400px; height:300px; padding:10px; background:#eee; font:12px Arial,sans-serif; }
		#text { width:400px; height:190px; background:#fff; margin-bottom:10px; overflow:hidden; padding:5px; }
	</style>

</head>

<body>
	<div id="container">
		<h3><a href="">Pi Comet</a> > Examples > <em>Realtime Chat Example</em></h3>
		<div id="text"><div id="data">Waiting...</div></div>

		Send:&nbsp;<input id="message" style="width:350px" type="text">
		<br />Nickname:&nbsp;<input id="nickname" type="text" value="Guest" /><br />
	</div>
	<script>prepareForm()</script>
</body>
</html>
